<template>
  <div>
    <a-tabs v-model="activeKey" v-if="tabs.length > 1" @change="changeTab">
      <a-tab-pane
        :key="index + 1"
        :tab="item"
        v-for="(item, index) in tabs"
      ></a-tab-pane>
    </a-tabs>

    <div class="card">
      <div class="title">{{ cardName }}</div>
      <div v-if="activeKey === 1">
        <div class="list" v-for="(item, index) in weightAb" :key="index">
          <div class="row flex-between">
            <div class="flex-center" style="gap: 20px">
              <div style="width: 100px; text-align: right">
                包裹id: {{ item.package_id }}
              </div>
              <div>{{ item.content }}</div>
            </div>
            <div class="flex-center" style="gap: 20px">
              <div class="cp" style="color: #409eff" @click="showDetail(item)">
                查看包裹详细
              </div>
              <div class="cp" style="color: #f56c6c" @click="gd(item)">处理完成归档</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeKey === 2">
        <div class="list" v-for="(item, index) in timeAb" :key="index">
          <div class="row flex-between">
            <div class="flex-center" style="gap: 20px">
              <div style="width: 100px; text-align: right">
                包裹id: {{ item.package_id }}
              </div>
              <div>{{ item.content }}</div>
            </div>
            <div class="flex-center" style="gap: 20px">
              <div class="cp" style="color: #409eff" @click="showDetail(item)">
                查看包裹详细
              </div>
              <div class="cp" style="color: #f56c6c" @click="gd(item)">处理完成归档</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="包裹详情"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane
          :key="index"
          v-for="(item, index) in tabs2"
          :label="item.label"
          :name="item.label"
        >
          <div class="card" style="margin-top: 20px">
            <div class="row2" v-for="(c, i2) in item.children" :key="i2">
              <div>{{ c.key }}</div>
              <div>{{ c.value }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import {
} from "../../../service";
export default {
  name: "BasicForm",
  i18n: require("./i18n"),
  data() {
    return {
      activeKey: 1,
      cardName: "",
      tabs: ["重量异常包裹", "处理异常包裹"],
      cardList: [
        {
          id: 1,
          msg: "处理站接收重量异常",
        },
      ],
      weightAb: [],
      timeAb: [],
      dialogVisible: false,
      activeName: "",
      tabs2: [],
      userList: [],
    };
  },
  created() {
    this.changeTab();
    this.getDayAbmormal();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    changeTab() {
      this.cardName = this.tabs[this.activeKey - 1];
    },
    showDetail(item) {
      console.log(item)
      sessionStorage.setItem('package_id', item.package_id)
      this.$router.push('/page/process')
      // this.tabs2 = [];
      // getPackageTimeline({
      //   package_id: item.package_id,
      //   status: item.status,
      // }).then((res) => {
      //   console.log(res);
      //   // 处理tab相关的信息
      //   if (res.data.stage && res.data.stage.length) {
      //     let children = [
      //       {
      //         key: "包裹id",
      //         value: res.data.stage[0].package_id,
      //       },
      //       {
      //         key: "暂存时间",
      //         value: res.data.stage[0].receive_time,
      //       },
      //       {
      //         key: "暂存接收重量-kg",
      //         value: res.data.stage[0].receive_weight,
      //       },
      //     ];
      //     if (res.data.stage[0].out_time) {
      //       children.push({
      //         key: "运出时间",
      //         value: res.data.stage[0].out_time,
      //       });
      //     }
      //     this.tabs2.push({
      //       label: "暂存",
      //       name: "暂存",
      //       children,
      //     });
      //   }
      //   if (res.data.transport && res.data.transport.length) {
      //     let children = [
      //       {
      //         key: "包裹id",
      //         value: res.data.transport[0].package_id,
      //       },
      //       {
      //         key: "运出时间",
      //         value: moment(res.data.transport[0].start_time).format(
      //           "YYYY-MM-DD HH:mm:ss"
      //         ),
      //       },
      //       {
      //         key: "到达时间",
      //         value: moment(res.data.transport[0].end_time).format(
      //           "YYYY-MM-DD HH:mm:ss"
      //         ),
      //       },
      //       {
      //         key: "车牌号",
      //         value: res.data.transport[0].transfer_vehicle_id,
      //       },
      //     ];
      //     if (
      //       this.userList.find(
      //         (u) => u.id == res.data.transport[0].transfer_person_id
      //       )
      //     ) {
      //       children.push({
      //         key: "运输人员",
      //         value: this.userList.find(
      //           (u) => u.id == res.data.transport[0].transfer_person_id
      //         ).name,
      //       });
      //     }

      //     this.tabs2.push({
      //       label: "运出",
      //       name: "运出",
      //       children,
      //     });
      //   }

      //   if (res.data.handle && res.data.handle.length) {
      //     let children = [
      //       {
      //         key: "包裹id",
      //         value: res.data.handle[0].package_id,
      //       },
      //       {
      //         key: "处理站接收时间",
      //         value: res.data.handle[0].receive_time,
      //       },
      //       {
      //         key: "处理站接收重量",
      //         value: res.data.handle[0].receive_weight,
      //       },
      //     ];
      //     if (
      //       this.userList.find((u) => u.id == res.data.handle[0].receiver_id)
      //     ) {
      //       children.push({
      //         key: "处理站处理人员",
      //         value: this.userList.find(
      //           (u) => u.id == res.data.handle[0].receiver_id
      //         ).name,
      //       });
      //     }

      //     this.tabs2.push({
      //       label: "处理",
      //       name: "处理",
      //       children,
      //     });
      //   }
      //   if (this.tabs2.length) {
      //     this.activeName = this.tabs2[0].label;
      //   }
      //   this.dialogVisible = true;
      // });
    },
    getDayAbmormal() {
    },
    gd(item) {
    }
  },
};
</script>

<style scoped lang="less">
.card {
  background: #fff;
}
.title {
  padding: 12px 20px;
  border-bottom: 1px solid lightgray;
  font-weight: bold;
  font-size: 16px;
}
.list {
  padding: 20px;
  .row {
    display: flex;
    align-items: center;
    gap: 30px;
  }
}
.row2 {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;

  & > div:first-child {
    width: 120px;
    text-align: right;
  }
}
</style>
